<template>
  <div class="group-list">
    <loading :show="loading" />
    <ul class="list">
      <li
        v-for="(item, index) in list"
        :key="index"
      >
        <p>拼团ID: {{ item.group_id }}</p>
        <p>上轮剩下: ￥{{ +Number.parseFloat(item.before).toFixed(2) }}</p>
        <p>增加: ￥{{ +item.add }}</p>
        <p>返奖: ￥{{+Number.parseFloat(item.return).toFixed(2)}}</p>
        <p>剩余: <span>￥{{+item.total}}</span></p>
        <p class="time">{{ item.create_time }}</p>
      </li>
    </ul>
    <pull-up
      :loading="loading"
      :busy="queryList.busy"
      :data-len="list.length"
      @loadMore="loadMore" />
  </div>
</template>

<script>
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
import PullUp from '@/components/PullUp'
export default {
  name: 'list',
  components: {
    PullUp,
    Loading
  },
  data() {
    return {
      loading: false,
      list: [],
      queryList: {}
    }
  },
  methods: {
    loadMore() {
      setTimeout(() => {
        this.getList(true)
      }, 200)
    },
    init() {
      this.queryList = {
        page: 0,
        pageSize: 10,
        busy: false
      }
      this.list = []
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        api.My.poolList({
          ...this.queryList
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
        }).finally(() => {
          this.loading = false
        })
      }
    }
  },
  created () {
    this.init()
    this.getList()
  },
  activated () {
  },
  deactivated () {
    this.queryList.busy = true
  }
}
</script>

<style scoped lang="stylus">
.group-list
  .list
    li
      background white
      margin 10px 0
      padding 10px
      text-align left
      border-radius 10px
      p
        height 20px
        line-height 20px
        span
          color red
</style>
